<template>
	<div>
		<van-field
			left-icon="location"
			right-icon="arrow-down"
			v-model="fieldValue"
			readonly
			label=""
			placeholder="选择学校"
			@click="showPicker = true"
		>
			<template #left-icon>
				<svg-icon name="selectschool" :size="16" color="#4088FF"/>
			</template>
		</van-field>
		<van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
			<van-picker
				:model-value="pickerValue"
				:columns="columns"
				@cancel="showPicker = false"
				@confirm="onConfirm"
				title="切换学校"
			>
			<template #columns-top>
				<van-divider style="margin-top: 0px;margin-bottom: 0px"/>
				<van-search v-model="pickerValue" placeholder="请搜索学校" />
			</template>
			</van-picker>
		</van-popup>
	</div>
	<van-divider style="margin-top: 0px;margin-bottom: 0px"/>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
  setup() {
	const columns = [
	      { text: '温州中学', value: 'Hangzhou' },
	      { text: '温州第二中学', value: 'Ningbo' },
	      { text: '温州第三中学', value: 'Wenzhou' },
	      { text: '温州第四中学', value: 'Shaoxing' },
	      { text: '温州第五中学', value: 'Huzhou' },
	];
	const fieldValue = ref('');
	const showPicker = ref(false);
	const pickerValue = ref([]);
	const onConfirm = ({ selectedValues, selectedOptions }:{selectedValues:any,selectedOptions:any}) => {
	  showPicker.value = false;
	  pickerValue.value = selectedValues;
	  fieldValue.value = selectedOptions[0].text;
	};
	return {columns,
      onConfirm,
      fieldValue,
      showPicker,
	  pickerValue
	};
  },
};
</script>

<style>
</style>